<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="../../scripts/ace-path.js"></script>
        <script src="../../scripts/ace-event.js"></script>
        <title>ace path examples</title>
        <style>
#canvas{
    ownerflow: hidden;
    width: 300px;
    height: 300px;
    border: solid 1px black;
}
#path{
    width: 600px;
}
        </style>
    </head>
    <body>
        <div>
            path: <input id="path" type="text" value="M0,0 L100,100 C 1,1 200,10 30, 100 Z" />
        </div>
        <div>
            stroke: <input id="stroke" type="text" value="red" />
            fill: <input id="fill" type="text" value="green" />
        </div>
        <div id="toolbar">
            <button cmd="set">set</button>
        </div>
        <div id="canvas"></div>
        <script>
void function(){
    var path = AcePath.create({
        parent: 'canvas',
        path: 'M0,0 L100,100'
    });

    AceEvent.on('toolbar', function(command){
        switch(command){
            case 'set':
                path.attr({
                    'path': document.getElementById('path').value,
                    'stroke': document.getElementById('stroke').value,
                    'fill': document.getElementById('fill').value
                });
                break;
        }
    });
}();
        </script>
    </body>
</html>